<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="static/css/public.css">
    <link rel="stylesheet" href="static/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="static/css/elementui.css" />
    <link rel="shortcut icon" href="favicon.ico">
    <script src="static/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/vue.js"></script>
    <script src="static/js/elementui.js" type="text/javascript" charset="utf-8"></script>
    <title>华为商城简介</title>
    <style>
       #userinfo .el-input__inner{
           width: auto;
       }
       #userinfo .address .el-input__inner{
           width: 500px;
       }
       #userinfo .el-input{
           width: auto;
       }
    </style>
</head>

<body id="login-body">
 <div id="userinfo">
    <div class="login-header">
        <div class="login-body">
            <div class="login-cont">
                <a href="index.html"><img src="static/image/head-top.png" alt=""></a>
            </div>
            <div class="login-name">
                <b style="font-size: 18px;margin-top: -5px;float: left;color:#cccccc;">|</b>
                <b style="font-size: 18px;margin-top: -3px;float: left; margin-left:18px;">个人中心</b>
            </div>
        </div>
    </div>
    <div class="login-main">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- 修改用户名 -->
            <el-tab-pane label="修改用户名" name="first">
                <el-form>
                    <el-form-item label="用户名" label-width="55px">
                        <el-input v-model="userName" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" plain style="width: 19%;" @click="saveName">保存</el-button>
            </el-tab-pane>
            <!-- 修改密码 -->
            <el-tab-pane label="修改密码" name="second">
                <el-form>
                    <el-form-item label="旧密码&emsp;" label-width="68px">
                        <el-input v-model="oldPassword" type="password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码&emsp;" label-width="68px">
                        <el-input v-model="newPassword" type="password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" label-width="68px">
                        <el-input v-model="newPassword2" type="password" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" plain style="width: 19%;" @click="savePassword">保存</el-button>
            </el-tab-pane>
            <!-- 添加收货地址 -->
            <el-tab-pane label="添加收货地址" name="third">
                <el-form class="address">
                    <el-form-item label="新增地址" label-width="68px">
                        <el-input v-model="userAddress"  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="收货人" label-width="68px">
                        <el-input v-model="getUserName"  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" label-width="68px">
                        <el-input v-model="userPhone"  autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" plain style="width: 19%;" @click="saveAddress('save')">保存</el-button>
            </el-tab-pane>
            <!-- 收货地址管理 -->
            <el-tab-pane label="收货地址管理" name="five">
                    <el-table
					:data="jsonAddressData"
					style="width: 100%">
					<el-table-column
						prop="userAddress"
						label="地址"
						>
                    </el-table-column>
                    <el-table-column
						prop="getUserName"
						label="收货人"
						>
                    </el-table-column>
                    <el-table-column
						prop="userPhone"
						label="手机号"
						>
					</el-table-column>
					<el-table-column
						label="操作"
                        >
						<template slot-scope="scope">
                            <a href="javascript:void(0)" style="color:#1989fa" @click="changeM(scope.row)">修改</a>
							<a href="javascript:void(0)" style="color:#1989fa" @click="deletAddress(scope.row.userAddress)">删除</a>
						</template>
					</el-table-column>
					</el-table>
            </el-tab-pane>
        </el-tabs>
        <el-dialog title="修改默认地址" :visible.sync="dialogFormVisiblemorenaddress">
        <el-form :model="form">
            <el-form-item label="收货地址" :label-width="formLabelWidth">
            <el-input v-model="form.userAddress" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="收货人" :label-width="formLabelWidth">
            <el-input v-model="form.getUserName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="form.userPhone" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisiblemorenaddress = false">取 消</el-button>
            <el-button type="primary" @click="sureSave">确 定</el-button>
        </div>
        </el-dialog>
    </div>
</div>
</body>
<script type="text/javascript">
    // 注册
    Vue.component('my-component', {});
    var WEITUOSERVER = new Vue({
        el: '#userinfo',
        data: {
            jsonData: [],
            formLabelWidth:"150px",
            form:{
                userAddress:"",
                getUserName:"",
                userPhone:""
            },
            dialogFormVisiblemorenaddress:false,
            userName:JSON.parse(window.sessionStorage.user).userName,
            userId:JSON.parse(window.sessionStorage.user).userId,
            activeName: 'first',
            userInfo:JSON.parse(window.sessionStorage.user),
            oldPassword:"",
            newPassword:"",
            newPassword2:"",
            userAddress:"",
            getUserName:"",
            userPhone:"",
            dataid:"",
            jsonAddressData:[]
        },
        created() {
            this.gatAddressData();
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            sureSave(){
                if(!(/^1[34578]\d{9}$/.test(this.form.userPhone))){ 
                    alert("手机号码有误，请重填");  
                    return false; 
                } 
                this.userAddress = this.form.userAddress;
                this.userPhone = this.form.userPhone;
                this.getUserName = this.form.getUserName;
                this.saveAddress('change')
            },
            changeM(res){
                var that = this;
                that.dialogFormVisiblemorenaddress = true;
                that.form.userAddress=res.userAddress;
                that.form.getUserName=res.getUserName;
                that.form.userPhone=res.userPhone;
                that.dataid = res.dataid;
            },
            gatData() {
                var that = this;
                $.ajax({
                    type: "GET",
                     url: "php/car.php",
                     data: {"userId":JSON.parse(window.sessionStorage.user).userId},
                     dataType: "json",
                    success: function(data) {
                        that.jsonData = data.data;
                    },
                });
            },
            gatAddressData(){
                var that = this;
                var user = window.sessionStorage.user ? JSON.parse(window.sessionStorage.user) :"";
                if(!user){
                    return;
                }
                $.ajax({
                    type: "GET",
                        url: "php/detail.php",
                        data: {"userId":user.userId,"getAddressdata":"getAddressdata"},
                        dataType: "json",
                    success: function(res) {
                        that.jsonAddressData = res.data;
                    },
                });
            },
            deletAddress(userAddress){
                var that = this;
                var user = window.sessionStorage.user ? JSON.parse(window.sessionStorage.user) :"";
                if(!user){
                    return;
                }
                $.ajax({
                    type: "GET",
                     url: "php/detail.php",
                     data: {"userAddress":userAddress,"userId":user.userId,"deletAddress":"deletAddress"},
                     dataType: "json",
                    success: function(data) {
                        that.$message({
                            message: "删除成功",
                            type: 'success'
                        });
                        that.gatAddressData();
                    },
                    error:function(data){
                        that.$message({
                            message: data.responseText,
                            type: 'warning'
                        });
                        // window.location.reload();
                    }
                });
            },
            saveName(){
                var that = this;
                if(!this.userName){
                    that.$message({
                        message: "用户名不能为空",
                        type: 'warning'
                    });
                    return;
                }
                $.ajax({
                    type: "GET",
                     url: "php/index.php",
                     data: {"userName":that.userName,"changeName":"changeName","userId":that.userId},
                     dataType: "json",
                    success: function(data) {
                        if(data.resultCode==200){
                            that.$message({
                                message: "修改成功",
                                type: 'success'
                            });
                         var olduser = JSON.parse(window.sessionStorage.user);
                         olduser.userName = that.userName;
                         window.sessionStorage.user = JSON.stringify(olduser);
                        }else if(data.resultCode==0001){
                            that.$message({
                                message: data.message,
                                type: 'warning'
                            });
                        }
                        
                    },
                    error:function(data){
                        that.$message({
                            message: data.responseText,
                            type: 'warning'
                        });
                    }
                });
            },
            savePassword(){
                var that = this;
                if(!this.oldPassword){
                    that.$message({
                        message: "旧密码不能为空",
                        type: 'warning'
                    });
                    return;
                }
                if((this.newPassword != this.newPassword2) || this.newPassword2==""){
                    that.$message({
                        message: "两次新密码不一致",
                        type: 'warning'
                    });
                    return;
                }
                $.ajax({
                    type: "GET",
                     url: "php/index.php",
                     data: {"password":that.newPassword,"changePassword":"changePassword","userId":that.userId},
                     dataType: "json",
                    success: function(data) {
                        if(data.resultCode==200){
                            that.$message({
                                message: "修改成功",
                                type: 'success'
                            });
                        }else if(data.resultCode==0001){
                            that.$message({
                                message: data.message,
                                type: 'warning'
                            });
                        }
                        
                    }
                });
            },
            saveAddress(setType){
                var that = this;
                if(!this.userAddress || !this.userPhone || !this.getUserName){
                    that.$message({
                        message: "请填写完成",
                        type: 'warning'
                    });
                    return;
                }
                if(!(/^1[34578]\d{9}$/.test(this.userPhone))){ 
                    alert("手机号码有误，请重填");  
                    return false; 
                } 
                if(setType == "save"){
                    var sendData = {"userAddress":that.userAddress,"addUserAddress":"addUserAddress","userId":that.userId,"userPhone":that.userPhone,"getUserName":that.getUserName,"type":setType,"dataid":Date.parse(new Date())}
                }else{
                    var sendData = {"userAddress":that.userAddress,"addUserAddress":"addUserAddress","userId":that.userId,"userPhone":that.userPhone,"getUserName":that.getUserName,"type":setType,"dataid":that.dataid}
                }
                $.ajax({
                    type: "GET",
                     url: "php/index.php",
                     data: sendData,
                     dataType: "json",
                    success: function(data) {
                        if(data.resultCode==200){
                            that.$message({
                                message: "设置成功",
                                type: 'success'
                            });
                            that.userAddress = "";
                            that.userPhone = "";
                            that.getUserName = "";
                            that.gatAddressData();
                            that.dialogFormVisiblemorenaddress = false;
                        }else if(data.resultCode==0001){
                            that.$message({
                                message: data.message,
                                type: 'warning'
                            });
                        }
                        
                    }
                });
            },
            formatDate(now) {
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var date = now.getDate();
				var hour = now.getHours();
				var minute = now.getMinutes();
				var second = now.getSeconds();
				// return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
				return year + "-" + month + "-" + date + " " + hour + ":" + minute;
			},
        }
    })
</script>
</html>